<template>
  <div class="top-item-wrapper">
    <img :src="imgUrl" alt="" style="width: 40px; height: 40px;" />
    <div class="text-wrapper">
      <div class="text-div">
        <span class="text-div-title">
          {{ title }}
        </span>
        <a-tooltip v-if="content && content.length >= 11">
          <template slot="title">
            {{ content }}
          </template>
          <span class="text-div-content">
            {{ content.substring(0, 11) }}
          </span>
        </a-tooltip>
        <span v-else class="text-div-content">{{ content ? content : 0 }}</span>
      </div>
    </div>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  props: ["imgUrl", "title", "content"]
};
</script>

<style lang="scss" scoped>
.top-item-wrapper {
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .text-wrapper {
    display: flex;
    align-items: center;
    .text-div {
      display: flex;
      flex-direction: column;
      margin-left: 12px;
      .text-div-title {
        font-size: 14px;
        font-weight: 400;
        color: #767885;
        line-height: 21px;
      }
      .text-div-content {
        font-size: 21px;
        font-weight: bold;
        color: #55565d;
        line-height: 24px;
        margin-top: 10px;
      }
    }
  }
}
</style>
